<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12306 注册</title>
    <style>
        /* 页面整体样式设置 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            background-color: #f2f2f2; /* 背景颜色 */
            margin: 0; /* 去掉页面默认外边距 */
            padding: 0; /* 去掉页面默认内边距 */
        }

        /* 注册框容器样式 */
        .register-container {
            width: 400px; /* 宽度 */
            margin: 50px auto; /* 垂直居中，左右居中 */
            padding: 20px; /* 内边距 */
            background-color: #fff; /* 背景颜色白色 */
            border-radius: 10px; /* 边框圆角 */
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        /* 标题样式 */
        h2 {
            text-align: center; /* 文本居中 */
            color: #333; /* 文本颜色 */
        }

        /* 输入框容器样式 */
        .input-group {
            margin-bottom: 15px; /* 每个输入框的下方间距 */
        }

        /* 输入框标签样式 */
        .input-group label {
            display: block; /* 标签独占一行 */
            margin-bottom: 5px; /* 标签与输入框的距离 */
            font-weight: bold; /* 标签加粗 */
        }

        /* 输入框、下拉框样式 */
        .input-group input, 
        .input-group select {
            width: 100%; /* 输入框宽度为父容器的100% */
            padding: 10px; /* 输入框内边距 */
            font-size: 16px; /* 字体大小 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 下拉选择框样式 */
        .input-group select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        /* 注册按钮样式 */
        .btn {
            width: 100%; /* 按钮宽度为100% */
            padding: 10px; /* 按钮内边距 */
            background-color: #0073e6; /* 按钮背景色 */
            border: none; /* 无边框 */
            color: #fff; /* 按钮文字颜色为白色 */
            font-size: 16px; /* 按钮文字大小 */
            border-radius: 5px; /* 按钮圆角 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
        }

        /* 鼠标悬停时按钮背景颜色变深 */
        .btn:hover {
            background-color: #005bb5;
        }

        /* 复选框容器样式 */
        .checkbox-group {
            display: flex;
            align-items: center; /* 垂直居中复选框和标签 */
        }

        /* 复选框样式 */
        .checkbox-group input {
            margin-right: 10px; /* 复选框与文本的距离 */
        }

        /* 注册框底部样式 */
        .register-footer {
            text-align: center; /* 文本居中 */
            margin-top: 10px; /* 上方间距 */
        }

        /* 底部链接样式 */
        .register-footer a {
            color: #0073e6; /* 链接文本颜色 */
            text-decoration: none; /* 去掉下划线 */
        }

        /* 鼠标悬停时显示下划线 */
        .register-footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 注册框容器 -->
    <div class="register-container">
        <!-- 注册框标题 -->
        <h2>12306 注册</h2>

        <!-- 注册表单 -->
        <form>
            <!-- 用户名输入框 -->
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" required>
            </div>

            <!-- 密码输入框 -->
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" required>
            </div>

            <!-- 确认密码输入框 -->
            <div class="input-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" placeholder="请再次输入密码" required>
            </div>

            <!-- 证件类型选择框 -->
            <div class="input-group">
                <label for="id-type">证件类型</label>
                <select id="id-type" required>
                    <option value="身份证">身份证</option>
                    <option value="护照">护照</option>
                    <option value="港澳通行证">港澳通行证</option>
                    <option value="台胞证">台胞证</option>
                </select>
            </div>

            <!-- 证件号码输入框 -->
            <div class="input-group">
                <label for="id-number">证件号码</label>
                <input type="text" id="id-number" placeholder="请输入证件号码" required>
            </div>

            <!-- 姓名输入框 -->
            <div class="input-group">
                <label for="name">姓名</label>
                <input type="text" id="name" placeholder="请输入姓名" required>
            </div>

            <!-- 出生日期输入框 -->
            <div class="input-group">
                <label for="dob">出生日期</label>
                <input type="date" id="dob" required>
            </div>

            <!-- 性别选择框 -->
            <div class="input-group">
                <label for="gender">性别</label>
                <select id="gender" required>
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>
            </div>

            <!-- 邮箱输入框 -->
            <div class="input-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" placeholder="请输入邮箱地址" required>
            </div>

            <!-- 手机号码输入框 -->
            <div class="input-group">
                <label for="phone">手机号码 (+86)</label>
                <input type="tel" id="phone" placeholder="请输入手机号码" required>
            </div>

            <!-- 旅客类型选择框 -->
            <div class="input-group">
                <label for="traveler-type">旅客类型</label>
                <select id="traveler-type" required>
                    <option value="成人">成人</option>
                    <option value="儿童">儿童</option>
                    <option value="学生">学生</option>
                </select>
            </div>

            <!-- 同意并阅读遵守复选框 -->
            <div class="checkbox-group">
                <input type="checkbox" id="agreement" required>
                <label for="agreement">我已阅读并同意《用户协议》和《隐私政策》</label>
            </div>

            <!-- 注册按钮 -->
            <button type="submit" class="btn">注册</button>
        </form>

        <!-- 忘记密码链接 -->
        <div class="register-footer">
            <a href="#">忘记密码?</a>
        </div>
    </div>
</body>
</html>
